<template>
  <div class="tourist">
    <div class="tourist-top">
      <p class="tourist-top-title">实时游客统计</p>
      <p class="tourist-top-icon"></p>
      <p class="tourist-top-right">可预约总量:<span>99999</span>人</p>
    </div>
    <div class="tourist-sum">
      <span v-for="item,index in people_sum" :key="index">{{item}}</span>
    </div>
    <!-- echarts图表 -->
    <div class="tourist-chart" ref="chartsDom"></div>
  </div>
</template>

<script setup lang="ts">
//引入echarts
import * as echarts from "echarts";
//引入水球图拓展插件 echarts-liquidfill
import 'echarts-liquidfill';
import { onMounted, ref } from "vue";

//人数
let people_sum = ref('216908人');
//dom节点
let chartsDom = ref();

//生命周期
onMounted(()=>{
  //获取echarts类的实例,初始化
  let mycharts = echarts.init(chartsDom.value);
  //设置实例的配置项
  mycharts.setOption({
    // 标题
    title:{
      // text:"水球图"
    },
    //x|y轴组件
    // xAxis:{},
    // yAxis:{},
    //系列；决定你展示什么样的图形
    series:{
      type:'liquidFill',  //系列
      data:[0.6],  //展示数据
      waveAnimation:true,  //是否展示动画
      animationDuration:3,  //动画时间
      animationDurationUpdate:0,
      radius:'90%',  //半径
    },
    //布局
    gird:{
      left:0,
      right:0,
      top:0,
      bottom:0
    }
  })
})


</script>
<script lang="ts">
export default {
    name:"Tourist"
}
</script>

<style scoped>
.tourist{
  background: url("@/assets/images_screen/dataScreen-main-lb.png") no-repeat;
  background-size: 100% 100%;
  margin-top:10px;
}


.tourist-top{
  margin-left: 20px;
}
.tourist-top-title{
  color:white;
  font-size:20px;
}
.tourist-top-icon{
  width: 68px;
  height: 7px;
  background: url("@/assets/images_screen/dataScreen-title.png") no-repeat;
  background-size: cover;
  margin-top: 10px;
}
.tourist-top-right{
  float: right;
  color: white;
  font-size: 20px;
}
.tourist-top-right span{
  color: yellowgreen;
}

.tourist-sum{
  margin: 50px 5px 0 5px;
  display: flex;
}
.tourist-sum span{
  flex:1;
  height: 40px;
  text-align: center;
  color: #29fcff;
  font-size: 30px;
  font-weight:bold;
  line-height: 40px;
  background: url("@/assets/images_screen/total.png") no-repeat;
  background-size: cover;
}

.tourist-chart{
  width: 100%;
  height: 250px;
}
</style>